<template>
    <div class="transaction_search_detail">
        <Card>
            <p slot="title">
                付款交易查询详情
            </p>
            <div>
                <Form class="step-form" ref="orderData" :model="orderData" :label-width="100">

                    <Row span="12">
                        <i-col span="5" >
                            <FormItem label="车辆品牌：" label-position="left" :label-width="150">
                                {{orderData.source_brand}}
                            </FormItem>
                        </i-col>
                        <i-col span="8" >
                            <FormItem  label="车辆型号：" label-position="left" :label-width="150">
                                {{orderData.source_model}}
                            </FormItem>
                        </i-col>
                        <i-col span="5" >
                            <FormItem  label="车架号：" label-position="left" :label-width="150">
                               {{orderData.order_no}}
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="5" >
                            <FormItem  label="车辆单价：" label-position="left" :label-width="145">
                                {{orderData.price}}
                            </FormItem>
                        </i-col>
                        <i-col span="9" >
                            <FormItem  label="购车定金：" label-position="left" :label-width="160">
                                {{orderData.intention_money}}
                            </FormItem>
                        </i-col>
                        <i-col span="6" >
                            <FormItem  label="购车尾款：" label-position="left" :label-width="150">
                              {{orderData.tail_money}}
                            </FormItem>
                        </i-col>
                    </Row>
                    <FormItem style='margin-top:100px;'>
                        <Button  @click="goBack" style="width:100px;" >返回</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>

</template>

<script>
    import ajax from '../../../libs/axios.js'
    export default {
        name: 'transaction_search_detail',
        data () {
            return {
                orderData: {},
            }
        },
        created () {
            this.getList();
        },
        activated () {
            this.getList();
        },
        methods: {
            // 初始化列表
            getList(){
                this.$store.commit('setActiveName', 'transactionsearch');
                let url = 'adminlogin/financial/selectOrderInfoById';
                let orderId=this.$route.params.id;
                let data = {
                    orderId:orderId
                }
                ajax.formRes(url, data).then(res => {
                    if (res.code == 200){
                        this.orderData=res.data;
                    }else{
                        this.$Message.error('数据问题，请联系管理员');
                    }
                }).catch(err => {
                    console.log('有错误信息');
                    console.log(err);
                })
            },
            goBack () {
                this.$router.push({
                    name: 'transactionsearch'
                })
            }
        },
    }
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .small-title{
        font-style: normal;
        font-weight: bold;
        font-size:14px;
    }
</style>

